<template>
	<!-- 20230215 -->
	<view class="user-register-trade-page">
		<!-- 页面内容 -->
		<view class="page-content">
			<!-- 背景图 -->
			<view class="bg_img">
				<image :src="tradeBgImg" mode="aspectFill" class="width-100p height-100p"></image>
			</view>
			<!-- 表单 -->
			<!-- #ifndef MP-WEIXIN -->
			<view class="jc-footer-safe">
				<view class="margin-lr-30 margin-bottom-30 padding-lr-45 padding-tb-50 radius-20 bg-ff">
					<view class="line-height-90 radius-45 bg-f5">
						<input class="line-height-90 padding-lr-40" type="number" name="mobile_phone" maxlength="11"
							v-model="mobilePhone" placeholder="请输入手机号" placeholder-class="text-28 text-aa" />
					</view>

					<view class="margin-top-30 padding-lr-40 line-height-90 radius-45 bg-f5 flex align-center">
						<input class="flex-one line-height-90" type="number" name="code" maxlength="4" v-model="code"
							placeholder="请输入验证码" placeholder-class="text-28 text-aa" />
						<ty-register-get-code :mobile-phone="mobilePhone"></ty-register-get-code>
					</view>

					<view class="margin-top-30 line-height-90 radius-45 bg-main-gradient text-center text-32 text-ff"
						@click="login">
						登录
					</view>

					<view class="margin-top-55 line-30 text-22 flex align-center justify-center">
						<text
							:class="[isRegisterAgree === true ? 'tyIcon-round-check text-main' : 'tyIcon-round text-cc','text-32']"
							@click="isRegisterAgree = !isRegisterAgree"></text>
						<view class="margin-left-15 text-98">登录注册即代表您同意</view>
						<view class="text-4b8" @click="goPrivacy">《隐私政策》</view>
						<view class="text-98">与</view>
						<view class="text-4b8" @click="goAgreement">《用户协议》</view>
					</view>
				</view>
			</view>
			<!-- #endif -->

			<!-- #ifdef MP-WEIXIN -->
			<view class="jc-footer-safe">
				<view class="margin-bottom-30 margin-lr-30">
					<button open-type="getPhoneNumber" class="width-100p line-height-90 radius-45 bg-main text-ff"
						@getphonenumber="getPhoneNumber" v-if="isRegisterAgree">
						快速注册/登录
					</button>
					<button class="width-100p line-height-90 radius-45 bg-main text-ff" v-if="!isRegisterAgree"
						@click="goAgree">
						快速注册/登录
					</button>

					<view class="margin-top-55 line-30 text-22 flex align-center justify-center">
						<text
							:class="[isRegisterAgree === true ? 'tyIcon-round-check text-main' : 'tyIcon-round text-cc','text-32']"
							@click="isRegisterAgree = !isRegisterAgree"></text>
						<view class="margin-left-15 text-98">登录注册即代表您同意</view>
						<view class="text-4b8" @click="goPrivacy">《隐私政策》</view>
						<view class="text-98">与</view>
						<view class="text-4b8" @click="goAgreement">《用户协议》</view>
					</view>
				</view>
			</view>
			<!-- #endif -->

		</view>
		<!-- 页面浮层 -->
		<view class="page-layer">
		</view>
	</view>
</template>

<script>
	import user from "../api/user.js"
	import project from "../../project/api/project.js"
	export default {
		data() {
			return {
				//上级用户ID
				lastUserId: '',
				// 手机号
				mobilePhone: '',
				// 验证码
				code: '',
				// 背景图
				tradeBgImg: '',
				// 是否同意
				isRegisterAgree: false,
				// 用户协议链接
				noticeUrl: '/pages/common/richText?title=用户协议&url=project/api/Config/getAgreement&param=agreement',
				// 隐私政策链接
				privacyUrl: '/pages/common/richText?title=隐私政策&url=project/api/Config/getAgreement&param=privacy_policy'
			}
		},

		onLoad(options) {
			// #ifdef MP-WEIXIN
			this.lastUserId = decodeURIComponent(options.scene)
			// #endif
			// #ifndef MP-WEIXIN
			this.lastUserId = options.hasOwnProperty('user_id') ? options.user_id : ''
			// #endif
		},

		onReady() {
			project.user.getUserTradeConfig().then(res => {
				if (res.code === 0) {
					// #ifdef MP-WEIXIN
					this.tradeBgImg = res.data.trade_bg_img_mp_weixin
					// #endif
					// #ifndef MP-WEIXIN
					this.tradeBgImg = res.data.trade_bg_img_h5
					// #endif
				}
			})
		},

		methods: {
			/**
			 * 注册并登录(微信小程序)
			 * @param {Object} e
			 * @date 2023-02-15
			 */
			getPhoneNumber(e) {
				// #ifdef MP-WEIXIN
				if (e.detail.code) {
					var openid = uni.getStorageSync('openid')
					this.rq.getData('base/mpweixin/api/Auth/getPhoneNumber', {
						code: e.detail.code,
						last_user_id: this.lastUserId
					}).then(res => {
						if (res.code == 0) {
							uni.setStorageSync('user_id', res.data.user_id)
							uni.setStorageSync('access_token', res.data.access_token)
							uni.setStorageSync('access_token_expire_time', res.data.access_token_expire_time)

							// TODO 修改为跳转项目首页
							uni.switchTab({
								url: '/pages/mall/index'
							})
						}
					})
				} else {
					console.log(e.detail.errMsg)
				}
				// #endif
			},

			/**
			 * 注册并登录（H5）
			 * @date 2023-02-05
			 */
			login() {
				if (!this.isRegisterAgree) {
					this.cn.toast("请勾选用户协议")
					return false
				}
				if (!this.mobilePhone) {
					this.cn.toast("请输入手机号")
					return false
				}
				if (!this.code) {
					this.cn.toast("请输入验证码")
					return false
				}

				user.login.login(1, this.mobilePhone, this.code, '', this.lastUserId).then(res => {
					if (res.code === 0) {
						uni.setStorageSync('user_id', res.data.user_id);
						uni.setStorageSync('access_token', res.data.access_token)
						uni.setStorageSync('access_token_expire_time', res.data.access_token_expire_time)

						uni.navigateTo({
							url: '/pages/common/download'
						})
					}
				})
			},

			/**
			 * 微信小程序还没有同意协议时点击授权手机号按钮
			 * @date 2023-02-15
			 */
			goAgree() {
				this.cn.toast("请勾选用户协议")
				return false
			},

			/**
			 * 跳转用户协议
			 * 2022-05-24
			 */
			goAgreement() {
				uni.navigateTo({
					url: this.noticeUrl
				})
			},

			/**
			 * 跳转隐私政策
			 * 2022-05-24
			 */
			goPrivacy() {
				uni.navigateTo({
					url: this.privacyUrl
				})
			}
		}
	}
</script>

<style scoped>
	.bg_img {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}

	.text-4b8 {
		color: #4B81B8;
	}
</style>
